<template>
  <div :class="['pagination-wrapper',align]">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageInfo.pageNum"
      :page-sizes="pageSizes"
      :page-size.sync="pageInfo.pageSize"
      :layout="innerLayout"
      :total="pageInfo.total" v-bind="$attrs">
    </el-pagination>
  </div>
</template>
<script>
const COMPONENT_NAME = 'guodePagination'
export default {
  name: COMPONENT_NAME,
  props: {
    pageInfo: {
      type: Object,
      default: () => {
        return { total: 0, pageSize: 30, pageNum: 1, hasMore: false }
      },
    },
    pageSizes: { type: Array, default: () => [10, 20, 30, 50, 100, 200, 300, 400] },
    layout: { type: String, default: 'sizes, prev, pager, next, jumper' },
    align: { type: String, default: 'right' },
  },
  computed: {
    innerLayout() {
      if (this.layout === 'easy') {
        return 'total, prev, pager, next'
      }
      if (this.layout === 'full') {
        return 'total, sizes, prev, pager, next, jumper'
      }
      return this.layout
    },
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('updateSizePage', val)
    },
    handleCurrentChange(val) {
      this.$emit('updateCurrentChange',val)
    },
  },
}
</script>

<style lang="scss">
.pagination-wrapper {
  margin-top: 10px;
  &.right {
    text-align: right;
  }
  &.left {
    text-align: left;
  }
  &.center {
    text-align: center;
  }
}
</style>